<template>
    <div class="h-full flex flex-col">
        <div class="flex justify-between w-full">
            <el-form-item>
                <el-button type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
                <el-button :icon="Refresh" @click="getList">刷新</el-button>
            </el-form-item>
        </div>
        <div class="table-section grid" style="height:calc(100% - 50px)">
            <el-table border :data="tableData.list" style="height:100%">
                <el-table-column type="index" label="序号" width="80px" align="center"/>
                <el-table-column prop="label" label="标题" align="center"/>
                <el-table-column prop="set" label="盘数" align="center"/>
                <el-table-column prop="weight" label="权重" align="center"/>
                <el-table-column prop="createdAt" label="创建时间" align="center"/>
                <el-table-column prop="updatedAt" label="更新时间" align="center"/>
                <el-table-column prop="action" label="操作" fixed="right" align="center">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button type="primary" :icon="Edit" circle plain @click="openDialog('update',scope.row)"/>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row.id)"/>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <dialog-add-edit ref="dialogRef" @update="getList"></dialog-add-edit>
    </div>

</template>
<script setup>
import { ref, reactive, nextTick, useTemplateRef, onMounted } from 'vue'
import { Delete, Refresh, Edit, Search, Share, Plus, Memo } from '@element-plus/icons-vue'
import pointsRuleSApi from '@/api/model/points-rule-s.js'
import DialogAddEdit from './dialog-add-edit.vue'

/**
 * 表格相关字段
 */
const tableData = reactive({
    list: []
})

const dialogEditRef = useTemplateRef('dialogRef')

/**
 * 打开编辑弹窗
 */
function openDialog (type, item) {
    dialogEditRef.value.openDialog(type, item)
}

/**
 * 删除操作
 */
function handleDelete (id) {
    /*删除二次确认*/
    ElMessageBox.confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        // 删除
        deleteItem(id)
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}

/**
 *  获取列表
 */
async function getList () {
    const { code, data } = await pointsRuleSApi.list.get()
    if (code === 200) {
        tableData.list = data
    } else {
        tableData.list = []
    }
}

/**
 * 删除
 */
async function deleteItem (id) {
    const { code, data } = await pointsRuleSApi.delete.post({
        id: id
    })
    if (code === 200) {
        getList()
    }
}

onMounted(() => {
    getList()
})

</script>


